<script setup>
import { onMounted, ref } from 'vue'
import { useCartStore } from '@/stores/cartStore'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const cartStore = useCartStore()
const route = useRoute()
const router = useRouter()

const info = ref(JSON.parse(route.query.item))
const ruleFormRef = ref()
const refundInfo = ref({})

// 收货地址表单校验
const rules = ref({
	consignee: [{ required: true, message: '请输入收货人', trigger: 'blur' }],
	mobile: [
		{
			required: true,
			message: '请输入正确的手机号码',
			trigger: 'blur'
		}
	],
	addrCascader: [{ required: true, message: '请输入收货地址', trigger: 'change' }],
	addr: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
})

onMounted(() => getInfo())

const getInfo = () => {
	// console.log(info.value)
}

// 收货地址弹窗点击确定
const confirm = () => {
	// 调用实例方法
	ruleFormRef.value.validate(async (valid) => {
		// valid: 所有表单都通过校验  才为true
		// 以valid做为判断条件 如果通过校验才执行逻辑
		if (valid) {
			// TODO confirm
			const params = {
				...refundInfo.value
			}
			if (refundInfo.value.addrId == undefined) {
				// 新增
				await AddAddrAPI(params)
				ElMessage({ type: 'success', message: '新增成功' })
			} else {
				// 编辑
				await updateAddrAPI(params)
				ElMessage({ type: 'success', message: '新增成功' })
			}
			getAddr()
			showDialog.value = false
		}
	})
}
</script>

<template>
	<div class="refund-page">
		<div class="box">
			<el-form ref="ruleFormRef" :model="refundInfo" :rules="rules" label-width="80px">
				<el-form-item label="退款商品" prop="consignee" class="product-info">
					<img :src="info.imgUrl" alt="" srcset="" />
				</el-form-item>
				<el-form-item label="退款原因" prop="mobile">
					<el-input v-model="refundInfo.mobile" />
				</el-form-item>
				<el-form-item label="退款金额" prop="addr">
					<el-input v-model="refundInfo.addr" />
				</el-form-item>
				<el-form-item label="退款说明" prop="addr">
					<el-input type="textarea" v-model="refundInfo.addr" :rows="4" resize="none" />
				</el-form-item>
				<el-form-item label="上传图片" prop="addr"> 上传图片+</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<style scoped lang="scss">
.refund-page {
	background-color: #f4f4f4;
	padding: 0 160px;
	min-height: calc(100vh - 151px);
	.box {
		background-color: #fff;
		padding: 20px 50px 50px;
		.el-form {
			width: 600px;
		}
	}
}
</style>